<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />

    {block name='title'} {empty name="pageData['title']"}
    <title>{$c['web_title']}</title>
    {else/}
    <title>{$pageData['title']}</title>
    {/empty} {/block} {block name='keywords'} {empty
    name="pageData['keywords']"}
    <meta name="keywords" content="{$c['web_keywords']}" />
    {else/}
    <meta name="keywords" content="{$pageData['keywords']}" />
    {/empty} {/block} {block name='description'} {empty
    name="pageData['description']"}
    <meta
      name="description"
      itemprop="description"
      content="{$c['web_description']}"
    />
    {else/}
    <meta
      name="description"
      itemprop="description"
      content="{$pageData['description']}"
    />
    {/empty} {/block}
    <link rel="stylesheet" href="/static/web/css/owl.carousel.css" />
    <link rel="stylesheet" href="/static/web/css/animate.css" />
    <link rel="stylesheet" href="/static/web/css/font-awesome.min.css" />
    <link rel="stylesheet" href="/static/plug_in/layui-v2.5.6/css/layui.css" />
    <link rel="stylesheet" href="/static/web/css/bootstrap.min.css" />
    <link rel="stylesheet" href="/static/web/css/main.css" />
    <link rel="stylesheet" href="/static/web/fonts/iconfont/iconfont.css" />
    <style>
      .cle::after {
        content: "";
        display: block;
        clear: both;
      }
      .flex {
        display: flex;
        align-items: center;
      }
      #layer {
        display: none;
        background: #fff;
        padding: 20px;
        font-size: 24px;
        font-weight: bold;
        text-align: center;
        color: #000;
      }
      #layer img {
        width: 300px;
      }
      .daohang {
        max-width: 1200px;
        padding: 30px 20px;
        margin: 0 auto;
        border-bottom: 1px solid #f1f1f1;
      }
      .daohang a {
        font-size: 20px;
        display: inline-block;
      }
      .daohang .iconfont {
        color: #888;
        margin: 0 10px;
      }
      .daohang > div:last-child a {
        color: #888;
      }
    </style>
    {block name='css'}{/block}
  </head>
  <body>
    <div class="preloader">
      <span class="preloader-spin"></span>
    </div>
    <div class="site">

      <!-- 公共头部 -->
      <header>
        <div class="container">
          <div class="row">
            <div class="col-6 col-sm-3 logo-column">
              <a href="/" class="logo">
                <img src="/uploads/{$c['web_logo']['img']}" alt="logo" />
              </a>
            </div>
            <div class="col-6 col-sm-9 nav-column clearfix">
              <!-- pc端菜单 -->
              <nav id="menu" class="d-none d-lg-block">
                <ul>
                  {volist name="navDatas" id="v"} 
                    <li class="{$v.class}" data-title="{$v.cn_name}">
                      <a href="{$v.url}?page_id={$v.id}" target="{$v['jump']}">{$v.cn_name}</a>
                   
                      {notempty name="v['sub']"}
                      <ul class="sub-menu">
                        {volist name="v['sub']" id="vo"}
                        <li>
                          <a href="{$vo.url}?page_id={$vo.id}{$vo.otherUrlParam}" target="{$vo['jump']}">{$vo.cn_name}</a>
                        </li>
                        {/volist}
                      </ul>
                      {/notempty}

                    </li>
                  {/volist}
                  <li><a href="/index/index/search" class="iconfont iconfont-Search2"></a></li>
                </ul>
              </nav>

              <!-- 手机端菜单 -->
              <nav class="mobile-menu">
                <div class="flex">
                  <div class="mobile-menu-1">MENU <i class="fa fa-bars"></i></div>
                  <div class="right-icon"><a href="/index/index/search"> <i class="iconfont iconfont-Search2"></i></a></div>
                </div>
              </nav>
            </div>
          </div>
        </div>

        <!-- 手机端菜单弹窗 -->
        <div class="mobile-menu-2">
          <ul>
            {volist name="navDatas" id="v"} 
              {empty name="v['sub']"}
              <li>
                <a href="{$v.url}?page_id={$v.id}">{$v.cn_name}</a>
              </li>
              {else/}
              <li>
                <a href="#" class="mebile-menu-3"
                  ><span>{$v.cn_name}</span> <i class="fa fa-angle-right"></i
                ></a>
                <dl>
                  {volist name="v['sub']" id="vo"}
                  <dd><a href="{$vo.url}?page_id={$vo.id}">{$vo.cn_name}</a></dd>
                  {/volist}
                </dl>
              </li>
              {/empty} 
            {/volist}
          </ul>
        </div>
      </header>

      <!-- 页面个性化内容 -->
      <div class="big-content">

        <!--除了首页 其他页面的公共部分 -->
        {present name="pageData"} 
          {neq name="pageData['url']" value="/index/index/index"}
          <div class="banner page-title" style="background-image: url(/uploads/{$pageData.banner})" >
            <div class="b1 flex">
              <div class="b2">{$pageData.banner_text}</div>
            </div>
          </div>
          <div class="daohang flex">
            <div><a href="/">首页</a></div>

            <!-- 如果上级id不等于0 展示上级菜单 -->
            {neq name="$pageData['pid']" value="0"}
            <div><div class="iconfont">&#xf14f;</div></div>
            <div><a href="">{$fatherPageData['cn_name']}</a></div>
            {/neq}

            <div><div class="iconfont">&#xf14f;</div></div>
            <div><a href="{$pageData['url']}">{$pageData['cn_name']}</a></div>

            {present name="navTypeInfo"}
            <div><div class="iconfont">&#xf14f;</div></div>
            <div><a href="{$navTypeInfo['url']}">{$navTypeInfo['name']}</a></div>
            {/present} 

          </div>
          {/neq} 
        {/present} 
        
        {block name="content"}{/block}

      </div>

      <!-- 公共底部 -->
      <footer>
        <div class="flex f1">
          <div class="f2">
            <div class="f4">联系我们</div>
            <div class="f5">CONKACT US</div>
            <div class="f6">
              <div>联系电话：{$c['web_mobile']}</div>
              <div>电子邮箱：{$c['company_email']}</div>
              <div>公司地址：{$c['company_addr']}</div>
              <div>地址邮编：{$c['company_zip_code']}</div>
            </div>
          </div>
          <div class="f10 flex">
            {neq name="$c['web_img1']['other']" value="隐藏"}
            <div class="f11">
              <img src="/uploads/{$c['web_img1']['img']}" alt="" />
              <div class="f13">{$c['web_img1']['text']}</div>
            </div>
            {/neq} {neq name="$c['web_img2']['other']" value="隐藏"}
            <div class="f11">
              <img src="/uploads/{$c['web_img2']['img']}" alt="" />
              <div class="f13">{$c['web_img2']['text']}</div>
            </div>
            {/neq}
          </div>
        </div>

        <!-- 友情链接模块 -->
        {eq name="$c['web_config_showFriendlyLink']" value="true"}
        <div class="f20">
          <a>友情链接:</a>
          {volist name="$c['web_friendlyLink']" id="v"}
          <a href="{$v['other']}" target="_blank">{$v['text']}</a>
          {/volist}
        </div>
        {/eq}

        <div class="f30">
          <div class="f31 flex">
            <div class="f32">
              <a>Copyright 2016-2024</a>
              <a>{$c['company_name']}</a>
            </div>
            <div class="f33 flex">
              <a href="https://beian.miit.gov.cn/" target="_blank"
                >{$c['web_benan']}</a
              >
            </div>
          </div>
        </div>
      </footer>
    </div>
    <div id="layer">
      <img src="/uploads/{$c['web_img2']['img']}" alt="" />
      <div>{$c['web_mobile']}</div>
    </div>
    <!-- 设置主题颜色 -->
    <!-- <div id="color"></div> -->

    <script src="/static/plug_in/jquery-1.9.1.min.js"></script>
    <script
      type="text/javascript"
      src="/static/plug_in/layui-v2.5.6/layui.js"
    ></script>
    <script src="/static/web/js/vendor/popper.min.js"></script>
    <script src="/static/web/js/vendor/bootstrap.min.js"></script>
    <script src="/static/web/js/vendor/owl.carousel.min.js"></script>
    <script src="/static/web/js/active.js"></script>
    <script>
      //高亮菜单
      console.log("{$pageData['cn_name']}")
      $("#menu > ul > li").each(function(index,ele){

        //查找菜单中的标题名称 是否等于 当前页面数据的标题名称
        if($(this).data('title') === "{$pageData['cn_name']}"||$(this).data('title') === "{$fatherPageData['cn_name']}"){
          $(this).addClass("current-menu-item");
        }

      })

      layui.use(["layer", "colorpicker", "util"], function () {
        var layer = layui.layer;

        var util = layui.util;
        util.fixbar({
          bar1: true,
          click: function (type) {
            console.log(type);
            if (type === "bar1") {
              layer.open({
                type: 1,
                title: false,
                closeBtn: 0,
                area: ["auto"],
                skin: "layui-layer-nobg", //没有背景色
                shadeClose: true,
                content: $("#layer"),
              });
            }
          },
        });
      });

      //后台设置主题色
      let color = "{$c['web_config_color']}";
      let el = document.documentElement;
      el.style.setProperty(`--main-color`, color);
      getRgbaColor(color);

      //处理rbg格式数据转成数组
      function getRgbaColor(color, mode = "all") {
        let arr = color.match(/\((.+?)\)/g)[0];
        arr = arr.substr(1, arr.length - 2).split(",");
        if (mode == "all") {
          for (let i = 1; i <= 9; i++) {
            el.style.setProperty(
              `--main-color-${i}`,
              `rgba(${arr[0]},${arr[1]},${arr[2]},.${i})`
            );
          }
        } else {
          el.style.setProperty(
            `--main-color-${mode}`,
            `rgba(${arr[0]},${arr[1]},${arr[2]},1)`
          );
        }
      }

      $(".mobile-menu-1").click(function () {
        $(".mobile-menu-2").slideToggle(200);
      });
      $(".mebile-menu-3").click(function () {
        $(this).next().slideToggle(200);
      });
    </script>
    {block name='js'}{/block}
  </body>
</html>
